<template>
	<view class="page">
		<view class="top">

		</view>
		<view class="content">
			<view class="topList">
				<view class="topItem" v-for="(item,index) in topList" :key="index" @click="gongneng(index)">
					<image :src=" '../../../static/c'+ item.type +'.png'" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</view>
			<view class="text">
				<textarea v-model="txt" maxlength='-1' name="" id="" cols="30" rows="10"
					placeholder="在这里粘贴文章内容"></textarea>
			</view>
			<view class="bottom">
				<view class="l">

				</view>
				<view class="r">
					{{txt.length}}字
				</view>
			</view>
		</view>
		<view class="bottomSubmit">
			<view class="submit" @click="show">批量替换文字</view>
			<view class="submit" @click="gourl">检测违禁词</view>
		</view>


		<uni-popup ref="showcenter" type="center"  backgroundColor="#fff" @change="change">
			<view class="contenttext">
				<div class="top">
					<div class="l">

					</div>
					<view class="title">
						批量替换文字
					</view>
					<div class="r" @click="close">
						x
					</div>
				</div>
				<div class="center">
					<input type="text" v-model="textA" placeholder="请输入要替换的文字">
					<div class="div">替换为</div>
					<input type="text" v-model="textB" placeholder="请输入替换目标文字">
				</div>
				<div class="submit" @click="submit">确认替换</div>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textA: '',
				textB: '',
				txt: '',
				topList: [{
						text: '粘贴内容',
						type: 1
					},
					{
						text: '清空',
						type: 2
					},
					{
						text: '一键排版',
						type: 3
					}
				]
			}
		},
		watch: {
			// txt:{
			// 	handler(newVal,oldVal){
			// 		console.log(newVal.length,oldVal)
			// 	}
			// }
		},
		methods: {
			gourl(){
				uni.navigateTo({
					url:'/pages/ProhibitedWords/ProhibitedWords?txt='+this.txt
				})
			},
			change(e){
				console.log(e)
			},
			submit() {
				let newStr = this.txt.replace(this.textA, this.textB)
				this.txt = newStr
				this.$refs.showcenter.close()
				console.log(newStr)
				// this.textB = this.txt.replace()
			},
			close() {
				this.$refs.showcenter.close()
			},
			show() {
				this.$refs.showcenter.open()
			},
			gongneng(index) {
				console.log(index)
				
				if (index == 0) {
					uni.getClipboardData({
						success:function(res) {
							console.log(res.data)
							uni.showToast({
								title:'粘贴成功！',
								duration:2000
							})
							this.txt=res.data
							console.log(this.txt)
						}
					})
				} else if (index == 1) {
					this.txt = ''
				}else if (index ==2){
					
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		height: 100%;
	}

	.page {
		// min-height: 100vh;
		height: 100%;
		background-color: #F2F1F6;
		padding: 20rpx;
	
	.contenttext {
			padding: 30rpx;
			width: 600rpx;
			height: 550rpx;

			.submit {
				width: 98%;
				margin: 50rpx auto 0;
				text-align: center;
				background-color: #ff0000;
				color: #ffffff;
				line-height: 80rpx;
				border-radius: 10rpx;
			}

			.center {
				input {
					border: 2rpx solid #cccccc;
					line-height: 100rpx;
					height: 100rpx;
					margin: 20rpx 0;
					border-radius: 10rpx;
					padding-left: 20rpx;
				}
			}

			.top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.title {
					font-size: 40rpx
				}

				.r {
					font-size: 40rpx;
					color: #cccccc;
				}
			}
		}

		.bottomSubmit {
			margin-top: 130rpx;
			display: flex;
			justify-content: space-between;

			.submit {
				background-color: #ffffff;
				width: 45%;
				line-height: 100rpx;
				text-align: center;
			}
		}

		.content {
			background-color: #ffffff;
			height: 1200rpx;
			padding: 0 20rpx;

			.bottom {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				color: #cccccc;
				border-top: 2rpx solid #cccccc;
			}

			.text {
				padding: 20rpx;
				height: 80%;
				color: #555555;

				textarea {
					height: 100%;
					width: 100%;
				}
			}

			.topList {
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #cccccc;
				line-height: 80rpx;

				// padding: 10rpx 20rpx;
				.topItem:nth-child(1) {
					border-right: 2rpx solid #cccccc;
				}

				.topItem:nth-child(3) {
					background-color: #F4F4F4;
					// padding: 0;
				}

				.topItem {
					width: 33%;
					text-align: center;
					padding: 10rpx 20rpx;

					text {}

					image {
						width: 50rpx;
						vertical-align: middle;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
